<template>
  <el-dialog :visible.sync="doadd" title="宝贝设置">
    <!--工具栏-->
    <div class="head-container">
      <div style="float: right">
        <el-input
          v-model="search"
          placeholder="请输入内容"
          autocomplete="off"
          size="mini"
          @keyup.enter.native="searching">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="searching"/>
        </el-input>
      </div>
      <div class="head-container">
        <el-table
          v-loading="loading"
          :data="data"
          size="small"
          style="width: 100%">
          <el-table-column
            prop="baby"
            align="center"
            label="宝贝">
            <template slot-scope="scope">
              <div style="display:flex">
                <el-image
                  :src="scope.row.cover_url"
                  style="width: 40px; height: 40px;flex: 0 0 auto;"
                  fit="cover">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"/>
                  </div>
                </el-image>
                <div style="padding-left:10px;width: calc(100% - 40px);">
                  <div :title="scope.row.name" class="spanOneLine">{{ scope.row.name }}</div>
                  <div class="redfont" style="text-align: left;">￥{{ scope.row.cost_price }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="200px">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="select(scope.row)">选择宝贝</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :current-page="page + 1"
          background
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"/>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import initData from '@/mixins/initData'
import { getToken, getCompanyId } from '@/utils/auth'
export default {
  mixins: [initData],
  data() {
    return {
      data: [{}],
      search: '',
      doadd: false,
      jumpDress: ''
    }
  },
  watch: {
    doadd(val) {
      if (val === true) {
        this.$nextTick(() => {
          this.init()
        })
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.jumpDress = process.env.COMMODITY_LIST_URL + '?token=' + getToken() + '&company_id=' + getCompanyId()
    })
  },
  methods: {
    beforeInit() {
      this.url = '/api/get-score-commodity-list'
      const commodity_name = this.search
      const sort = 'create_date,desc'
      // 获取普通商品
      this.params = { page: this.page, size: this.size, name: commodity_name, sort: sort, is_score_commodity: 0 }
      return true
    },
    select(row) {
      this.$emit('get', row)
      this.doadd = false
    },
    searching() {
      this.init()
    },
    reflash() {
      this.search = ''
      this.page = 0
      this.init()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>
<style scoped>
  .price {
    display: inline-block;
    width: 300px;
  }
  .footer {
    margin-left: 180px;
    margin-bottom: 30px;
  }
  .item {
    border: 1px solid #EBEEF5;
  }
  .itemline {
    padding-top: 10px;
    padding-left: 10px;
  }
  .other {
    margin-top: 10px;
  }
  .spanOneLine{
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-dialog__wrapper {
    z-index: 1000000 !important;
  }
</style>
